<template> 
  <div class="top-bar">
    <div class="top-bar-content">
      <img src="/医院.png" alt="logo" class="logo" />
      <h1 class="system-title">医疗设备管理系统</h1>
    </div>
  </div>
  <!-- 放在 login-page-wrapper 之前 -->
<div class="wave-bg">
  <svg viewBox="0 0 1440 320">
    <path fill="#a8e6cf" fill-opacity="0.6"
      d="M0,160L80,133.3C160,107,320,53,480,85.3C640,117,800,235,960,256C1120,277,1280,203,1360,165.3L1440,128V0H0Z" />
  </svg>
</div>

  <div class="login-page-wrapper">
    <div class="login-container">
      <div class="login-image-section"></div>
      <div class="login-form-section">
        <h2>登录</h2>
        <form @submit.prevent="handleLogin">
          <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>

          <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" v-model="username" placeholder="请输入用户名" required>
          </div>

          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" v-model="password" placeholder="请输入密码" required>
          </div>

        <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" id="email" v-model="email" placeholder="请输入绑定的邮箱" required />
        </div>



          <div class="form-group">
          <label for="code">验证码</label>
          <div class="code-send-group">
          <input type="text" id="code" v-model="code" placeholder="请输入验证码" required />
          <button type="button" @click="sendCode" :disabled="sending">
          {{ sending ? '发送中...' : '发送验证码' }}
          </button>
          </div>
          </div>


          <button type="button" @click="handleLogin">登录</button>
        </form>

      </div>
    </div>
  </div>
  <AppFooter />
</template>

<script>
import request from '@/utils/request';
import { useTokenStore } from '@/stores/token';
import AppFooter from '@/components/AppFooter.vue'

export default {
  name: 'Login',
  components: {
    AppFooter
  },
  data() {
    return {
      username: '',
      password: '',
      email: '',
      code: '',
      errorMessage: '',
      sending: false,
    };
  },
  methods: {
    async sendCode() {
  if (!this.username || !this.email) {
    this.errorMessage = '请先输入用户名和绑定的邮箱';
    alert(this.errorMessage);
    return;
  }

  this.sending = true;
  try {
    const res = await request.post('/auth/send-email-code', {
      username: this.username,
      email: this.email,
    });

    // 请求成功
    alert('验证码已发送，请检查邮箱');
  } catch (error) {
    console.log('[验证码发送失败]', error);

    // 默认错误信息
    this.errorMessage = '验证码发送失败';

    // 尝试获取 msg 或 error 字段
    if (error.response?.data?.msg) {
      this.errorMessage = error.response.data.msg;
    } else if (error.response?.data?.error) {
      this.errorMessage = error.response.data.error;
    } else if (error.message) {
      this.errorMessage = error.message;
    }

    // 显示后端返回的错误信息
    alert(`发送失败: ${this.errorMessage}`);
  } finally {
    this.sending = false;
  }
}
,

async handleLogin() {
  if (!this.code) {
    this.errorMessage = '请填写验证码';
    return;
  }

  try {
    console.log("提交登录表单");

    const response = await request.post('/auth/login', {
      username: this.username,
      password: this.password,
      code: this.code,
    });

    console.log('登录响应：', response.data);
    const token = response.data.token;
    const userId= response.data.userId;
    console.log('获取到的 Token：', token);
    console.log('获取到用户名：'+userId+'}')
    const tokenStore = useTokenStore()
    tokenStore.login(this.username, userId, token) // ✅ 激活 isLoggedIn、设置 userName、保存 token
    

    console.log('Token 已存储到 pinia');
    alert('登录成功！');
    window.location.href = '/gate.html';
  } catch (error) {
    this.errorMessage = '登录失败';
    if (error.response?.data?.error) {
      this.errorMessage = error.response.data.error;
    }
    alert(this.errorMessage);
  }
}

  },
};
</script>


<style scoped>
.footer-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}


html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* ✅ 禁止出现滚动条 */
}


.wave-bg {
  position: absolute;
  top: 60px;
  width: 100%;
  height: 200px;
  z-index: -1;
  overflow: hidden;
}

/* 顶部栏样式 */
.top-bar {
  width: 100%;
  height: 60px;
  background: linear-gradient(to right, #28a745, #218838);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.top-bar-content {
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.logo {
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.system-title {
  font-size: 1.6em;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

/* 背景动画（类似心电图动感） */
.login-page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 60px); /* 剔除顶部栏高度 */
  background: linear-gradient(-45deg, #a8e6cf, #dcedc1, #ffd3b6, #ffaaa5);
  background-size: 400% 400%;
  animation: gradientBG 12s ease infinite;
  overflow: hidden;
}


@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* 玻璃拟态容器 */
.login-container {
  margin-bottom: 100px;
  display: flex;
  width: 820px;
  backdrop-filter: blur(16px);
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 左侧背景图 */
.login-image-section {
  flex: 1;
  background-image: url('/login_background.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100%;
}

/* 表单部分 */
.login-form-section {
  flex: 1;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h2 {
  color: #1c3c2f;
  margin-bottom: 24px;
  font-size: 2em;
  text-align: center;
}

/* 表单 */
form {
  display: flex;
  flex-direction: column;
  max-width: 360px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
}

input[type="text"],
input[type="password"],
input[type="email"] {
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 0.95em;
  transition: all 0.3s ease;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
}

input:focus {
  border-color: #28a745;
  outline: none;
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.3);
}

/* 验证码组合 */
.code-send-group {
  display: flex;
  gap: 10px;
}

.code-send-group input {
  flex: 2;
}

.code-send-group button {
  flex: 1.2;
  padding: 10px;
  font-size: 0.9em;
  background: linear-gradient(to right, #28a745, #218838);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.code-send-group button:hover {
  box-shadow: 0 0 10px #218838;
  transform: scale(1.03);
}

/* 登录按钮 */
button[type="button"] {
  padding: 12px;
  margin-top: 12px;
  background: linear-gradient(to right, #28a745, #218838);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.05em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

button[type="button"]:hover {
  box-shadow: 0 0 14px #1e7e34;
  transform: scale(1.05);
}

/* 错误信息 */
.error-message {
  color: #dc3545;
  text-align: center;
  font-size: 0.9em;
  margin-bottom: 10px;
}

/* 页脚提示文字 */
p {
  margin-top: 18px;
  font-size: 0.9em;
  color: #6c757d;
  text-align: center;
}

p a {
  color: #28a745;
  text-decoration: none;
  font-weight: bold;
}

p a:hover {
  color: #1e7e34;
  text-decoration: underline;
}

/* 响应式 */
@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
    width: 95%;
  }

  .login-image-section {
    height: 160px;
  }

  .login-form-section {
    padding: 30px 20px;
  }
}

</style>
